<f:view>
    <h:outputText value="Account SignUp" style="font-size: 20px; font-weight: bold;"/>
    <a4j:region>
    <h:form id="signUpForm">
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage" rendered="#{!registerUserBean.registerOk}"/>
        <h:messages globalOnly="true" rendered="#{registerUserBean.registerOk}"/>
        <h:panelGrid columns="4" rendered="#{!registerUserBean.registerOk}">
            <h:outputText value="(*) Email Address:"/>
            <h:inputText id="email" maxlength="50" value="#{registerUserBean.registerUser.email}" size="30" required="true" requiredMessage="The email is required"/>
            <h:message for="email" style="color: red" styleClass="errorMessage"/>
            <h:outputLink value="/site/faces/recoveryPassword.jsp" rendered="#{registerUserBean.linkRPOk}" target="_blank">
                <h:outputText value="Recovery Password" />
            </h:outputLink>
        </h:panelGrid>
        <h:panelGrid columns="2">
            <a4j:commandButton id="submit" type="submit" value="Create Account" action="#{registerUserBean.createAccount}" reRender="signUpForm" />
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
        </h:panelGrid>
    </h:form>
    </a4j:region>
    <h:form>
        <h:outputLink value="/site/faces/welcome.jsp">
            <h:outputText value="Go to Welcome Page"></h:outputText>
        </h:outputLink>
    </h:form>
    <rich:separator height="1" />
</f:view>